<template>
    <div>
        <p>{{ message }}</p>
        <button @click="updateMessage">更新信息</button>
        <hr>
        <div v-show="isBlock">
            <Children></Children>
        </div>
        <button @click="block">点击卸载</button>
    </div>
</template>


<script setup>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from "vue";
import Children from "./components/Children.vue";
const message=ref('Hell Vue3')
const isBlock=ref(true)

function block(){
    isBlock.value=!isBlock.value
}
function updateMessage(){
    message.value='Hello World'
}

onMounted(()=>{
    console.log('挂载后');
})
onBeforeMount(()=>{
    console.log('挂载前');
})

console.log('创建');

onBeforeUpdate(()=>{
    console.log('更新前');
})

onUpdated(()=>{
    console.log('更新后');
})



</script>



<style scoped></style>